<template>
	<view>
		<view v-if="isLogin != true" class="loginbox">
			<view @click="Change" class="changebox"><text :class="{choose: isRegister != true}">登录</text>|<text :class="{choose: isRegister == true}">注册</text></view>
			<!-- 登录页面 -->
			<view v-if="isRegister != true">
				<view class="inputbox">
					账号：<input type="text" v-model="username">
					<hr>
				</view>
				<view class="inputbox">
					密码：<input type="text" v-model="password" password>
					<hr>
				</view>
				<button type="primary" @click="Login">登录</button>
				<button plain @click="ForgetPassword">忘记密码</button>
			</view>
			<!-- 注册页面 -->
			<view v-else>
				<view class="inputbox">
					账号：<input type="text" v-model="username">
					<hr>
				</view>
				<view class="inputbox">
					密码：<input type="text" v-model="password" password>
					<hr>
				</view>
				<view class="inputbox">
					确认密码：<input type="text" v-model="confirmPassword" password>
					<hr>
				</view>
				<view class="inputbox">
					绑定手机号/QQ邮箱：<input type="text" v-model="bindnumber">
					<hr>
				</view>
				<button plain="" @click="Register">注册</button>
			</view>
		</view>
		<!-- 用户信息页面 -->
		<view v-else class="userbox">
			<view class="topbox" @click="NavToUserInfo">
				<image :src="imgurl == '' ? '../../static/logo.png' : imgurl" mode="aspectFit" style="width: 8vh; height: 8vh; border-radius: 50%;">
				<view class="topname">{{name}}</view>
			</view>
			
			<view class="contentbox">
				<button @click="NavToList('历史记录')">历史记录</button>
				<button @click="NavToList('试卷记录')">试卷记录</button>
				<button @click="NavToList('错题列表')">错题</button>
				<button @click="NavToList('收藏列表')">收藏夹</button>
			</view>
			
			<view class="bottombox">
				<button type="warn" @click="Out">退出登录</button>
			</view>
		</view>
		
		<!-- 修改密码弹窗 -->
		<view class="cover" v-if="isShow">
			<view class="popbox">
				<view class="inputbox">
					新密码：<input type="text" v-model="pw" password>
					<hr>
				</view>
				<view class="inputbox">
					确认密码：<input type="text" v-model="cpw" password>
					<hr>
				</view>
				<button @click="SetPassword" type="primary">确认</button>
				<button @click="isShow = false" plain>关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { login, getuserinfo, register, setname, forgetpassword, setpassword } from '../../apis/userAPI.js'
	export default {
		data() {
			return {
				isLogin: false,
				username: '',
				password: '',
				confirmPassword: '',
				bindnumber: '',
				name: '',
				imgurl: '',
				isRegister: false,
				isShow: false,
				pw: '',
				cpw: ''
			}
		},
		onLoad() {
			this.GetUserInfo()
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.isLogin = true
				this.imgurl = this.$store.state.userInfo?.imgurl || ''
				this.name = this.$store.state.userInfo?.name
			}
		},
		methods: {
			// 登录
			Login() {
				let that = this
				if (this.username.split(' ').join('') == '' || this.password.split(' ').join('') == '') {
					uni.showToast({
					    title: '输入内容不能为空',
					    duration: 1000,
					    icon: "none"
					})
					return
				}
				login({
					username: this.username,
					password: this.password
				}).then((res) => {
					that.Success(res.userInfo.username, res.userInfo.name, res.userInfo.imgurl)
					that.$store.dispatch('setuserInfo', res.userInfo)
				})
			},
			// 登录或注册成功
			Success(username, name, imgurl) {
				uni.setStorageSync('token', username)
				this.username = ''
				this.password = ''
				this.confirmPassword = ''
				this.isLogin = true
				this.name = name
				this.imgurl = imgurl || ''
				this.bindnumber = ''
			},
			// 退出登录
			Out() {
				this.isLogin = false
				this.name = ''
				this.imgurl = ''
				this.$store.dispatch('setuserInfo', null)
				this.$store.dispatch('sethistorylist', null)
				this.$store.dispatch('setwronglist', null)
				this.$store.dispatch('setcollectlist', null)
				uni.removeStorageSync('token')
			},
			// 获取用户信息
			GetUserInfo() {
				let that = this
				if (uni.getStorageSync('token') && this.$store.state.userInfo == null) {
					this.isLogin = true
					getuserinfo({
						username: uni.getStorageSync('token')
					}).then((res) => {
						// console.log(res)
						that.$store.dispatch('setuserInfo', res.userInfo)
						that.imgurl = res.userInfo.imgurl
						that.name = res.userInfo.name
					})
				} else if (uni.getStorageSync('token')) {
					this.isLogin = true
					this.imgurl = this.$store.state.userInfo.imgurl
					this.name = this.$store.state.userInfo.name
				}
			},
			// 切换登录/注册
			Change() {
				this.username = ''
				this.password = ''
				this.confirmPassword = ''
				this.isRegister = !this.isRegister
				this.bindnumber = ''
			},
			// 注册
			Register() {
				if (this.password.split(' ').join('') == '' || this.password !== this.confirmPassword) {
					uni.showToast({
					    title: '密码不为空或确认密码不一致',
					    duration: 1000,
					    icon: "none"
					})
					return
				}
				if (this.bindnumber.split(' ').join('') == '' || this.username.split(' ').join('') == '') {
					uni.showToast({
					    title: '输入内容不能为空',
					    duration: 1000,
					    icon: "none"
					})
					return
				}
				let that = this
				register({
					username: this.username,
					password: this.password,
					bind: this.bindnumber
				}).then(res => {
					let userInfo = {
						username: this.username,
						password: '',
						name: this.username,
						imgurl: '',
						bind: this.bindnumber
					}
					that.$store.dispatch('setuserInfo', userInfo)
					that.Success(userInfo.username, userInfo.name, null)
				})
			},
			// 跳转用户信息页面
			NavToUserInfo() {
				uni.navigateTo({
						url: `/pages/userinfo/userinfo`,
						// url: `/pages/grade/grade?type=exercise`,
					})
			},
			// 忘记密码
			ForgetPassword() {
				const that = this
				uni.showModal({
					title: '请输入绑定的手机号/QQ',
					confirmColor:'#3A3A3A',
					cancelColor:'#999999',
					confirmText:'确定',
					editable: true, //显示
					content: '',
					success: function (res) {
						// console.log(res.content)
						if (res.confirm) {
							forgetpassword({
								username: that.username,
								bind: res.content
							}).then(res => {
								that.isShow = true
							})
						}
					},
				})
			},
			// 修改密码
			SetPassword() {
				let str = this.pw
				if (str.split(' ').join('') == '' || this.pw !== this.cpw) {
					uni.showToast({
					    title: '新密码不为空或确认密码不一致',
					    duration: 1000,
					    icon: "none"
					})
					return
				}
				let that = this
				setpassword({
					username: that.username,
					oldpassword: null,
					newpassword: that.pw
				}).then(res => {
					uni.showToast({
					    title: '修改成功',
					    duration: 1000,
					    icon: "success"
					})
					that.pw = ''
					that.cpw = ''
					that.isShow = false
				})
			},
			// 跳转列表页面
			NavToList(type) {
				uni.navigateTo({
					url: `/pages/list/list?type=${type}`
				})
			}
		}
	}
</script>

<style>

</style>

<style lang="less" scoped>
	.loginbox {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		padding: 1vh;
		
		width: 90vw;
		background-color: #F8F8F8;
		
		.changebox {
			height: 4vh;
			margin: 1vh 0;
			margin-bottom: 3vh;
			font-size: 3vh;
			display: flex;
			justify-content: space-around;
			color: #dedede;
			
			.choose {
				color: green;
			}
		}
		
		.inputbox {
			font-size: 2.5vh;
			margin: 1.5vh 0;
			
			input {
				font-size: 2.8vh;
				margin-top: 1vh;
			}
		}
		
		button {
			margin-top: 1vh;
		}
	}
	
	.userbox {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		
		.topbox {
			width: 90vw;
			height: 12vh;
			margin: 1vh auto;
			margin-bottom: 5vh;
			display: flex;
			align-items: center;
			padding-left: 5vw;
			background-color: #F8F8F8;
		    border: 1px solid rgba(0,0,0,.2);
			border-radius: 10px;
			
			.topname {
				font-size: 3.5vh;
				margin-left: 5vw;
			}
			
			&:active {
				background-color: #dedede;
			}
			
			&::after {
				content: ">";
				font-size: 3.5vh;
				position: absolute;
				right: 5vw;
			}
		}
		.contentbox {
			button {
				height: 8vh;
				line-height: 8vh;
				text-align: right;
				margin: 1vh 0;
			}
		}
		.bottombox {
			button {
				margin-top: 5vh;
				width: 50vw;
			}
		}
	}
	
	.cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(238, 238, 238, .9);
		
		.popbox {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
			background-color: #f8f8f8;
			padding: 2vh;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 10px;
			
			.inputbox {
				font-size: 2.5vh;
				margin: 1.5vh 0;
				width: 80vw;
				
				input {
					font-size: 2.8vh;
					margin-top: 1vh;
				}
			}
			
			button {
				margin-top: 1vh;
			}
		}
	}
	
</style>
